import React from "react";
import {Image, ImageBackground} from 'react-native';
import {Container, Content, Text, List, ListItem, Left, Icon, Body, Right, Switch} from "native-base";

export default class SideBar extends React.Component {
    render () {
        return (
            <Container>
                <Content>
                    <ImageBackground
                        source={{
                            uri: "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=0392c3bb252dd42a4b0409f9625230d0/77094b36acaf2edd7774df3b8d1001e93801935f.jpg"
                        }}
                        style={{
                            height: 120,
                            alignSelf: "stretch",
                            justifyContent: "center",
                            alignItems: "center"
                        }}

                        >

                        <Image
                            square
                            style={{height: 80, width: 70,borderWidth:1,borderColor:'red',padding:3,borderRadius:10,backgroundColor:'black' }}
                            source={{
                                uri: "https://wix.github.io/react-native-navigation/_images/logo.png"
                            }}
                        />
                    </ImageBackground>
                        <List>
                            <ListItem icon>
                                <Left>
                                    <Icon name="plane"/>
                                </Left>
                                <Body>
                                <Text>Airplane Mode</Text>
                                </Body>
                                <Right>
                                    <Switch value={false}/>
                                </Right>
                            </ListItem>
                            <ListItem icon>
                                <Left>
                                    <Icon name="wifi"/>
                                </Left>
                                <Body>
                                <Text>Wi-Fi</Text>
                                </Body>
                                <Right>
                                    <Text>GeekyAnts</Text>
                                    <Icon name="arrow-forward"/>
                                </Right>
                            </ListItem>
                            <ListItem icon>
                                <Left>
                                    <Icon name="bluetooth"/>
                                </Left>
                                <Body>
                                <Text>Bluetooth</Text>
                                </Body>
                                <Right>
                                    <Text>On</Text>
                                    <Icon name="arrow-forward"/>
                                </Right>
                            </ListItem>
                        </List>

                </Content>
            </Container>
        );
    }
}